<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
		<!-- toastr的js文件 -->
		<style>
			div{
				text-align: center;
			}
		</style>
		<script>
			//封装一个方法  查询所有联系人
			function select(pram,pnum) {
				$.ajax({
					url:"/ajaxday03/person/select",
					data:"pageNum="+pnum+"&"+pram,
					dataType:"json",
					success:function (result) {
						//服务器响应一个map集合
						// var totalPage = result.totalPage;
						var list = result.list;
						// console.log("totalPage="+totalPage);
						var html = "";
						$(list).each(function (i,obj) {
							html += '<tr>\n' +
									'\t\t\t\t\t<td>'+obj.id+'</td>\n' +
									'\t\t\t\t\t<td>'+obj.name+'</td>\n' +
									'\t\t\t\t\t<td>'+obj.phone+'</td>\n' +
									'\t\t\t\t\t<td>'+obj.address+'</td>\n' +
									'\t\t\t\t\t<td><button class="bt" abc="'+obj.id+'">删除</button><input type="hidden" name="p.id" /></td>\n' +
									'\t\t\t\t</tr>';
							//给删除按钮  添加一个id用来传递参数
                            // $(".bt").attr('abc',obj.id);
                            // console.log($(".bt"));
                            // console.log($(".bt").attr('abc'));
							// $("input").val(obj.id);
							// console.log($("input").val());
							// console.log($(".bt"));
							// $(".bt").attr("abc",obj.id);
							// console.log($(".bt").attr("abc"));
							// $(".del").attr("aaa",obj.id);
							// console.log( $(".del"));
							// console.log( $(".del").attr("aaa"));
						});
						//把遍历的tr放进tbody中  这里不用append方法而用html方法 是防止每次刷新都加载一遍
						$("#tb").html(html);
						//分页的方法
						// pages(result,pnum);
					}
				});
			}
			// function pages(result,pnum){
			// 	select(pram,pnum);
			// }
			$(function () {
				//页面加载完毕  展示数据
				select("",1);
                //添加联系人  显示隐藏
                $("#showAddPersonBtn").click(function () {
                    $("#addPersonFm").show();
                });
                //添加联系人功能  收集form表单数据  触发form表单中添加按钮的点击事件 发起对add的请求
				$("#addPersonBtn").click(function () {
					var name = $("#pn").val();
					var phone = $("#pp").val();
					if(name.trim().length==0){
						alert("联系人姓名不能为空");
					}
					if(phone.trim().length==0){
						alert("联系人电话不能为空");
					}
					//用jQuery封装好的ajax方法  发送请求
					$.ajax({
						url:"/ajaxday03/person/add",
						type:"get",
						data:$("#addPersonFm").serialize(),
						dataType: "json",
						success:function (result) {
                            $("#tb").children().remove();
							if(result.code==1){
								//此时表示添加成功   然后用ajax再发一次请求 调用查询全部的方法
								select("",1);
							}
						}
					});
					//添加完成后  情况form表单输入框的内容
					//清空form表的内输入框的方法  js中有一个reset方法   jquery对象实际是个数据
					// $("#addPersonFm")[0].reset()  //与下面一行一个意思  都是将form表单数据清空
					// $("#addPersonFm").get[0].reset()
					$("#pn").val("");
					$("#pp").val("");
					$("#pa").val("");
					//添加完成后 隐藏form表单
					$("#addPersonFm").hide();
				});
				//删除联系人  点击删除按钮触发删除事件  发起对remove的请求
				$("#tb").on("click",".bt",function () {
					var that = $(this);
					console.log(that);
					var data = that.attr("abc");
					// console.log(that.next());
					// console.log(that.next().val());
					// var data = that.next().serialize();
					console.log(data);
					$.ajax({
						url:"/ajaxday03/person/remove",
						type: "get",
						data: "p.id="+data,
						dataType:"json",
						success:function (result) {
                            $("#tb").children().remove();
							console.log(result);
							if(result.code==1){
								//删除成功  调用查询全部方法
								select("",1);
							}
						}
					});
				});
				//条件查询  点击搜索按钮  触发点击事件  发起对select的请求
				$("#btn").click(function () {
					$("#tb").children().remove();
					var data = $("#pname").serialize();
					console.log(data);
					select(data,1);
				});
				//上一页
				// $("#before").click(function () {
				// 	select(pram,pnum-1);
				// });
				// $("#after").click(function () {
				// 	select(pram,pnum+1);
				// });

            });


		</script>
	</head>

	<body>
		<!-- 缓存数据标签 -->
		<!-- d1用来缓存当前分页的page数据。 -->
		<span id="d1"></span>


		<form id="addPersonFm" style="display:none;">
				<table align='center' border="1">
					<tr>
						<td>姓名</td>
						<td><input type="text" name="p.name" id="pn" /></td>
					</tr>
					<tr>
						<td>手机号</td>
						<td><input type="text" name="p.phone" id="pp" /></td>
					</tr>
					<tr>
						<td>地址</td>
						<td><input type="text" name="p.address" id="pa" /></td>
					</tr>
					<tr>
						<td></td>
						<td><input id="addPersonBtn" type="button" value="添加" /></td>
					</tr>
				</table>
		</form>


		<table align='center' border='1' width="70%">
			<thead>
				<tr>
					<th colspan="1">
					<input id="showAddPersonBtn" type="button" value="添加" />
					</th>
					<th colspan="6">
						<input type="text" name="p.name" id="pname"  />
						<input id="btn" type="button" value="搜索" />
					</th>
				</tr>
				<tr style="background-color:#0080FF;color:white;">
					<th>ID</th>
					<th>姓名</th>
					<th>手机号</th>
					<th>地址</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="tb">

			</tbody>
			<tfoot id="tf">
				<tr>
					<td></td>
					<td><a href="#" id="before">上一页</a></td>
					<td></td>
					<td><a href="#" id="after">下一页</a></td>
					<td></td>
				</tr>
			</tfoot>
		</table>

	</body>
</html>
